<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }"
        >小凡自习室</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/welcome' }"
        >vue基础</el-breadcrumb-item
      >
      <el-breadcrumb-item>全选反选</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="28" v-for="obj in tableData" :key="obj.id">
        <el-checkbox v-model="obj.checked"></el-checkbox>
        <el-descriptions>
          <el-descriptions-item label="用户名">{{
            obj.name
          }}</el-descriptions-item>
          <el-descriptions-item label="日期">{{
            obj.date
          }}</el-descriptions-item>
          <el-descriptions-item label="身价">{{
            obj.Worth
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            obj.sex
          }}</el-descriptions-item>

          <el-descriptions-item label="联系地址">{{
            obj.address
          }}</el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>
      </el-col>
    </el-row>
    <!-- <el-pagination background layout="prev, pager, next" :total="100">
    </el-pagination> -->
    <el-row class="allBottom">
      <el-col boder> 全选 </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  created() {
    if (this.tableData.length == 0) {
      this.$store.dispatch('gitList')
    }
    // console.log(this.tableData)
  },
  computed: {
    ...mapState(['tableData'])
  },
  methods: {
    // btn() {
    //   console.log(this.tableData)
    // }
  }
}
</script>

<style scope>
.allBottom {
  position: fixed;
  bottom: 20px;
}
.el-col-24 {
  width: 100vh;
  height: 100px;
  background: #fff;
}
</style> 